/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form, Input, Radio, Select, Switch, Button } from 'antd';
import {connect} from 'dva';
import moment from 'moment'
import request from '@/utils/request';
import Zmage from 'react-zmage';
import Wechat_info  from './../../images/wechat_info.jpg'
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 17},
      }
    };

    const {getFieldDecorator} = this.props.form;
    return (
      <div>
        {
          this.props.editRecord?
            <Form>
              <FormItem
                {...formItemLayoutWithLabel}
                label={(<span>类型</span>)}
              >
                  <p style={{margin:0,color:'#000',lineHeight:'40px'}}>
                    {
                      this.props.editRecord.type
                    }
                  </p>
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel}
                label={(<span>时间</span>)}
              >
                  <p style={{margin:0,color:'#000',lineHeight:'40px'}}>
                    {
                      this.props.editRecord.time
                    }
                  </p>
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel}
                label={(<span>范围</span>)}
              >
                  <p style={{margin:0,color:'#000',lineHeight:'40px'}}>
                    {
                      this.props.editRecord.range
                    }
                  </p>
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel}
                label={(<span>备注</span>)}
              >
                  <p style={{margin:0,color:'#000',lineHeight:'40px'}}>
                    {
                      this.props.editRecord.remark
                    }
                  </p>
              </FormItem>
            </Form>
            :
            <Form onSubmit={this.handleSubmit}>
              <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               示例
            </span>
                )}
              >
                <Button type={'primary'} onClick={()=>{
                  Zmage.browsing({ src:Wechat_info })
                }}>查看示例</Button>
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               类型
            </span>
                )}
                help={'类型可以多选'}
              >
                {getFieldDecorator('type', {
                  initialValue:['突发性停水'],
                  rules: [{ required: true, message: '请选择类型' }],

                })(
                  <Select
                    mode="multiple"
                    style={{ width: '100%' }}
                    placeholder="可多选"
                  >
                    <Option value={'突发性停水'}>突发性停水</Option>
                    <Option value={'计划性停水'}>计划性停水</Option>
                    <Option value={'降压供水'}>降压供水</Option>
                  </Select>
                )}
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               时间
            </span>
                )}
              >
                {getFieldDecorator('time', {
                  initialValue: '',
                  rules: [{ required: true, message: '请输入时间' }],
                })(
                  <Input />
                )}
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               范围
            </span>
                )}
              >
                {getFieldDecorator('range', {
                  initialValue: '',
                  rules: [{ required: true, message: '请输入范围' }],
                })(
                  <TextArea rows={4} />,
                )}
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               备注
            </span>
                )}
                help={'微信公众号号模板有字数限制，备注不需要重复停水时间和停水范围，不要使用太多换行'}
              >
                {getFieldDecorator('remark', {
                  initialValue: '请上述区域用户做好储水准备,不便之处,恳请谅解.',

                })(
                  <TextArea rows={4} />,
                )}
              </FormItem>
            </Form>
        }

      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


